<template>
  <div class="palybar" v-if="currentSong">
    <span>{{ currentSong.name }}</span>
    <span>{{duration}}</span> | 
    <span>{{currentTime}}</span> |
    <span>{{playing}}</span> |
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["currentSong", "currentTime", "duration", "playing"]),
};
</script>

<style lang="less">
.palybar {
  background: lightblue;
  height: 60px;
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>